<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>可以射击的3D直升机</title>
  <style>
    .cuboid {
      width: 100%;
      height: 100%;
      position: relative;
    }
    .cuboid__side:nth-of-type(1) {
      height: calc(var(--thickness) * 1vmin);
      width: 100%;
      position: absolute;
      top: 0;
      transform: translate(0, -50%) rotateX(90deg);
    }
    .cuboid__side:nth-of-type(2) {
      height: 100%;
      width: calc(var(--thickness) * 1vmin);
      position: absolute;
      top: 50%;
      right: 0;
      transform: translate(50%, -50%) rotateY(90deg);
    }
    .cuboid__side:nth-of-type(3) {
      width: 100%;
      height: calc(var(--thickness) * 1vmin);
      position: absolute;
      bottom: 0;
      transform: translate(0%, 50%) rotateX(90deg);
    }
    .cuboid__side:nth-of-type(4) {
      height: 100%;
      width: calc(var(--thickness) * 1vmin);
      position: absolute;
      left: 0;
      top: 50%;
      transform: translate(-50%, -50%) rotateY(90deg);
    }
    .cuboid__side:nth-of-type(5) {
      height: 100%;
      width: 100%;
      transform: translate3d(0, 0, calc(var(--thickness) * 0.5vmin));
      position: absolute;
      top: 0;
      left: 0;
    }
    .cuboid__side:nth-of-type(6) {
      height: 100%;
      width: 100%;
      transform: translate3d(0, 0, calc(var(--thickness) * -0.5vmin)) rotateY(
              180deg
      );
      position: absolute;
      top: 0;
      left: 0;
    }
    *,
    *:after,
    *:before {
      box-sizing: border-box;
      transform-style: preserve-3d;
      transition: background 0.25s;
    }
    :root {
      --base-size: 20;
      --helicopter-height: calc(var(--base-size) * 1vmin);
      --helicopter-width: calc(var(--helicopter-height) * 2);
      --helicopter-one: hsl(0, 0%, calc((60 + (var(--on, 0) * 35)) * 1%));
      --helicopter-two: hsl(0, 0%, calc((55 + (var(--on, 0) * 35)) * 1%));
      --helicopter-three: hsl(0, 0%, calc((50 + (var(--on, 0) * 35)) * 1%));
      --helicopter-four: hsl(0, 0%, calc((40 + (var(--on, 0) * 35)) * 1%));
      --chair-one: hsl(0, 0%, calc((20 + (var(--on, 0) * 15)) * 1%));
      --chair-two: hsl(0, 0%, calc((15 + (var(--on, 0) * 15)) * 1%));
      --chair-three: hsl(0, 0%, calc((10 + (var(--on, 0) * 15)) * 1%));
      --chair-four: hsl(0, 0%, calc((5 + (var(--on, 0) * 15)) * 1%));
      --dash-one: hsl(0, 0%, calc((50 + (var(--on, 0) * 15)) * 1%));
      --dash-two: hsl(0, 0%, calc((45 + (var(--on, 0) * 15)) * 1%));
      --dash-three: hsl(0, 0%, calc((40 + (var(--on, 0) * 15)) * 1%));
      --dash-four: hsl(0, 0%, calc((35 + (var(--on, 0) * 15)) * 1%));
      --accent-one: hsl(10, 60%, calc((30 + (var(--on, 0) * 35)) * 1%));
      --accent-two: hsl(10, 60%, calc((25 + (var(--on, 0) * 35)) * 1%));
      --accent-three: hsl(10, 60%, calc((20 + (var(--on, 0) * 35)) * 1%));
      --accent-four: hsl(10, 60%, calc((15 + (var(--on, 0) * 35)) * 1%));
      --rocket-one: hsl(1, 60%, calc((20 + (var(--on, 0) * 25)) * 1%));
      --rocket-two: hsl(1, 60%, calc((15 + (var(--on, 0) * 25)) * 1%));
      --rocket-three: hsl(1, 60%, calc((10 + (var(--on, 0) * 25)) * 1%));
      --rocket-four: hsl(1, 60%, calc((5 + (var(--on, 0) * 25)) * 1%));
      --screen-one: hsla(
              210,
              80%,
              calc((25 + (var(--on, 0) * 25)) * 1%),
              0.45
      );
      --screen-two: hsla(
              210,
              80%,
              calc((25 + (var(--on, 0) * 25)) * 1%),
              0.4
      );
      --screen-three: hsla(
              210,
              80%,
              calc((25 + (var(--on, 0) * 25)) * 1%),
              0.35
      );
      --screen-four: hsla(
              210,
              80%,
              calc((25 + (var(--on, 0) * 25)) * 1%),
              0.35
      );
      --bg: hsl(210, 80%, calc((15 + (var(--on, 0) * 75)) * 1%));
    }
    body {
      min-height: 100vh;
      display: grid;
      place-items: center;
      background: var(--bg);
      overflow: hidden;
      touch-action: none;
    }
    .scene {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate3d(-50%, -50%, 100vmin);
      transform: translate3d(-50%, -50%, 100vmin) rotateX(-24deg) rotateY(
              44deg
      ) rotateX(calc(var(--rotate-x, 0) * 1deg)) rotateY(calc(var(
              --rotate-y,
              0
              ) * 1deg));
    }
    .helicopter {
      height: 100%;
      width: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-20%, -50%);
    }
    .helicopter__wrapper {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -webkit-animation: float 1s infinite linear;
      animation: float 1s infinite linear;
      height: var(--helicopter-height);
      width: var(--helicopter-width);
    }
    @-webkit-keyframes float {
      50% {
        transform: translate(-50%, -65%);
      }
    }
    @keyframes float {
      50% {
        transform: translate(-50%, -65%);
      }
    }
    .helicopter__base-light {
      --hue: 20;
      bottom: -6%;
      width: 6%;
      height: 6%;
      left: 47%;
      position: absolute;
    }
    .helicopter__tail-light {
      --hue: 15;
      top: -20%;
      width: 20%;
      height: 20%;
      position: absolute;
      left: 65%;
    }
    .helicopter__wing-light {
      --hue: 90;
      --speed: 0.4;
      top: -50%;
      width: 10%;
      height: 50%;
      position: absolute;
      left: 45%;
    }
    .helicopter__wing-light--left {
      transform: translate3d(0, 0, calc(var(--base-size) * 0.5vmin));
    }
    .helicopter__wing-light--right {
      transform: translate3d(0, 0, calc(var(--base-size) * -0.5vmin));
    }
    .helicopter > * {
      position: absolute;
    }
    .helicopter__rotor {
      top: 0;
      left: 30%;
      height: 14%;
      width: 8%;
    }
    .helicopter__cockpit {
      left: 0;
      top: 14%;
      width: 54%;
      height: 70%;
    }
    .helicopter__tail {
      top: 30%;
      height: 20%;
      width: 46%;
      left: 54%;
    }
    .helicopter__fin {
      right: 2%;
      top: 10%;
      height: 20%;
      width: 10%;
    }
    .helicopter__stabilizer {
      right: 2%;
      top: 30%;
      height: 10%;
      width: 10%;
    }
    .helicopter__skids {
      bottom: 0;
      left: 0;
      height: 6%;
      width: 70%;
    }
    .helicopter__wing {
      height: 6%;
      width: 22%;
      left: 28%;
      top: 60%;
    }
    .helicopter__launchers {
      height: 10%;
      width: 18%;
      left: 30%;
      top: 66%;
    }
    .helicopter__chair {
      position: absolute;
      left: 18%;
      top: 30%;
      width: 28%;
      height: 58%;
    }
    .helicopter__chair-back {
      position: absolute;
      width: 25%;
      right: 0;
      top: 0;
      height: 100%;
    }
    .helicopter__chair-bottom {
      position: absolute;
      height: 20%;
      right: 0;
      bottom: 0;
      width: 80%;
    }
    .helicopter__launcher {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
    }
    .helicopter__launcher--left {
      transform: translate3d(0, 0, calc(var(--base-size) * -0.425vmin));
    }
    .helicopter__launcher--right {
      transform: translate3d(0, 0, calc(var(--base-size) * 0.425vmin));
    }
    .helicopter__triblade {
      position: absolute;
      height: 100%;
      width: 100%;
      left: 50%;
      top: 50%;
      transform: translate3d(-25%, -75%, calc(var(--base-size) * 0.07vmin)) scale(
              1.25
      );
      border-radius: 50%;
      overflow: hidden;
      -webkit-animation: rotate-tri 0.2s infinite linear;
      animation: rotate-tri 0.2s infinite linear;
    }
    .helicopter__triblade:after,
    .helicopter__triblade:before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      height: 100%;
      width: 15%;
      background: var(--chair-four);
      transform: translate(-50%, -50%);
    }
    .helicopter__triblade:after {
      transform: translate(-50%, -50%) rotate(90deg);
    }
    @-webkit-keyframes rotate-tri {
      to {
        transform: translate3d(-25%, -75%, calc(var(--base-size) * 0.07vmin)) scale(
                1.25
        )
        rotate(-360deg);
      }
    }
    @keyframes rotate-tri {
      to {
        transform: translate3d(-25%, -75%, calc(var(--base-size) * 0.07vmin)) scale(
                1.25
        )
        rotate(-360deg);
      }
    }
    .helicopter__blades {
      height: calc(var(--helicopter-height) * 2);
      width: calc(var(--helicopter-height) * 2);
      left: 34%;
      top: 0%;
      transform: translate(-50%, -50%) rotateX(90deg) translate3d(0, 0, 1px);
      border-radius: 50%;
      overflow: hidden;
      -webkit-animation: blades infinite 0.1s linear;
      animation: blades infinite 0.1s linear;
    }
    .helicopter__blades:after,
    .helicopter__blades:before {
      content: '';
      height: 100%;
      width: 10%;
      background: linear-gradient(
              var(--chair-one) 0 5%,
              var(--accent-one) 5% 10%,
              var(--chair-one) 10% 90%,
              var(--accent-one) 90% 95%,
              var(--chair-one) 95% 100%
      );
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .helicopter__blades:after {
      transform: translate(-50%, -50%) rotate(90deg);
    }
    .helicopter__skid {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
    }
    .helicopter__skid:after,
    .helicopter__skid:before {
      content: '';
      position: absolute;
      left: 16%;
      width: 4%;
      bottom: 0;
      height: 400%;
      background: var(--chair-four);
      transform-origin: 50% 100%;
      transform: rotateX(calc(25 * var(--coefficient, 1deg)));
    }
    .helicopter__skid:before {
      left: 56%;
    }
    .helicopter__skid--left {
      transform: translate3d(0, 0, calc(var(--base-size) * 0.4vmin));
    }
    .helicopter__skid--right {
      --coefficient: -1deg;
      transform: translate3d(0, 0, calc(var(--base-size) * -0.4vmin));
    }
    .helicopter__dashboard {
      position: absolute;
      left: 2%;
      top: 50%;
      width: 16%;
      height: 38%;
    }
    @-webkit-keyframes shift {
      0%,
      10%,
      90%,
      100% {
        transform: translate(-20%, -50%) translate3d(0, 0, 0);
      }
      20%,
      50% {
        transform: translate(-20%, -50%) translate3d(0, 0, 10vmin);
      }
      60%,
      80% {
        transform: translate(-20%, -50%) translate3d(0, 0, -10vmin);
      }
    }
    @keyframes shift {
      0%,
      10%,
      90%,
      100% {
        transform: translate(-20%, -50%) translate3d(0, 0, 0);
      }
      20%,
      50% {
        transform: translate(-20%, -50%) translate3d(0, 0, 10vmin);
      }
      60%,
      80% {
        transform: translate(-20%, -50%) translate3d(0, 0, -10vmin);
      }
    }
    .cuboid--cockpit {
      --thickness: calc(var(--base-size) * 0.6);
    }
    .cuboid--cockpit div {
      background: var(--helicopter-four);
    }
    .cuboid--cockpit div:nth-of-type(1) {
      background: linear-gradient(
              90deg,
              var(--screen-one) 0 50%,
              var(--helicopter-one) 50% 100%
      ) 50% 50%/100% 100% no-repeat;
    }
    .cuboid--cockpit div:nth-of-type(2):after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      height: calc(100% - 1px);
      width: calc(100% - 1px);
      background: #914db3;
      transform: translate3d(
              -50%,
              -50%,
              calc(var(--helicopter-width) * -0.27)
      );
    }
    .cuboid--cockpit div:nth-of-type(4) {
      background: transparent;
      background: linear-gradient(
              var(--screen-two) 0% 80%,
              var(--helicopter-one) 80% 100%
      ) 50% 50%/100% 100% no-repeat;
    }
    .cuboid--cockpit div:nth-of-type(5) {
      background: transparent;
      background: linear-gradient(
              var(--helicopter-three),
              var(--helicopter-three)
      ) 100% 50%/50% 100% no-repeat, linear-gradient(
              var(--screen-three) 0% 80%,
              var(--helicopter-three) 80% 100%
      ) 0% 50%/50% 100% no-repeat;
    }
    .cuboid--cockpit div:nth-of-type(5):after {
      content: '';
      position: absolute;
      top: 50%;
      height: 50%;
      width: 25%;
      right: 15%;
      transform: translate3d(0%, -60%, 1px) scale(0.75);
      filter: saturate(0.5);
    }
    .cuboid--cockpit div:nth-of-type(6) {
      background: transparent;
      background: linear-gradient(
              var(--helicopter-two),
              var(--helicopter-two)
      ) 0 50%/50% 100% no-repeat, linear-gradient(
              var(--screen-four) 0% 80%,
              var(--helicopter-two) 80% 100%
      ) 100% 50%/50% 100% no-repeat;
    }
    .cuboid--cockpit div:nth-of-type(6):after {
      content: '';
      position: absolute;
      top: 50%;
      height: 50%;
      width: 25%;
      left: 15%;
      transform: translate3d(0%, -60%, 1px) scale(0.75);
      filter: saturate(0.5);
    }
    .cuboid--tail {
      --thickness: calc(var(--base-size) * 0.4);
      --clip: polygon(0 0, 100% 40%, 100% 60%, 0 100%);
    }
    .cuboid--tail div {
      background: var(--accent-four);
    }
    .cuboid--tail div:nth-of-type(1) {
      background: var(--accent-one);
      -webkit-clip-path: var(--clip);
      clip-path: var(--clip);
    }
    .cuboid--tail div:nth-of-type(2) {
      background: var(--accent-one);
      background: linear-gradient(
              90deg,
              transparent 0 40%,
              var(--accent-four) 40% 60%,
              transparent 60% 100%
      );
    }
    .cuboid--tail div:nth-of-type(3) {
      background: var(--accent-two);
      -webkit-clip-path: var(--clip);
      clip-path: var(--clip);
    }
    .cuboid--tail div:nth-of-type(4) {
      background: var(--accent-three);
    }
    .cuboid--tail div:nth-of-type(5) {
      background: transparent;
    }
    .cuboid--tail div:nth-of-type(5):after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: var(--accent-three);
      transform-origin: 0 50%;
      transform: rotateY(10deg);
    }
    .cuboid--tail div:nth-of-type(6) {
      background: transparent;
    }
    .cuboid--tail div:nth-of-type(6):after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: var(--accent-three);
      transform-origin: 100% 50%;
      transform: rotateY(-10deg);
    }
    .cuboid--stabilizer {
      --thickness: calc(var(--base-size) * 0.4);
    }
    .cuboid--stabilizer div {
      background: var(--helicopter-four);
    }
    .cuboid--stabilizer div:nth-of-type(1) {
      background: var(--helicopter-one);
    }
    .cuboid--stabilizer div:nth-of-type(3) {
      background: var(--helicopter-two);
    }
    .cuboid--stabilizer div:nth-of-type(4) {
      background: var(--helicopter-three);
    }
    .cuboid--fin {
      --thickness: calc(var(--base-size) * 0.1);
    }
    .cuboid--fin div {
      background: var(--helicopter-four);
    }
    .cuboid--fin div:nth-of-type(1) {
      background: linear-gradient(
              90deg,
              transparent 0 50%,
              var(--helicopter-one) 50% 100%
      );
    }
    .cuboid--fin div:nth-of-type(3) {
      background: var(--helicopter-two);
    }
    .cuboid--fin div:nth-of-type(4) {
      background: transparent;
    }
    .cuboid--fin div:nth-of-type(4):after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      background: var(--helicopter-two);
      height: 110%;
      width: 100%;
      transform-origin: 50% 100%;
      transform: rotateX(-24deg);
    }
    .cuboid--fin div:nth-of-type(5) {
      background: var(--helicopter-three);
      --clip: polygon(0 100%, 50% 0, 100% 0, 100% 100%);
      -webkit-clip-path: var(--clip);
      clip-path: var(--clip);
    }
    .cuboid--fin div:nth-of-type(6) {
      background: var(--helicopter-three);
      --clip: polygon(0 0%, 50% 0, 100% 100%, 0 100%);
      -webkit-clip-path: var(--clip);
      clip-path: var(--clip);
    }
    .cuboid--skid {
      --thickness: calc(var(--base-size) * 0.06);
    }
    .cuboid--skid div {
      background: var(--chair-four);
    }
    .cuboid--skid div:nth-of-type(1) {
      background: var(--chair-one);
    }
    .cuboid--skid div:nth-of-type(3) {
      background: var(--chair-two);
    }
    .cuboid--skid div:nth-of-type(4) {
      background: var(--chair-three);
    }
    .cuboid--dashboard {
      --thickness: calc(var(--base-size) * 0.52);
    }
    .cuboid--dashboard div {
      background: var(--dash-four);
    }
    .cuboid--dashboard div:nth-of-type(1) {
      background: var(--dash-one);
    }
    .cuboid--dashboard div:nth-of-type(3) {
      background: var(--dash-two);
    }
    .cuboid--dashboard div:nth-of-type(4) {
      background: var(--dash-three);
    }
    .cuboid--chair {
      --thickness: calc(var(--base-size) * 0.4);
    }
    .cuboid--chair div {
      background: var(--chair-four);
    }
    .cuboid--chair div:nth-of-type(1) {
      background: var(--chair-one);
    }
    .cuboid--chair div:nth-of-type(3) {
      background: var(--chair-two);
    }
    .cuboid--chair div:nth-of-type(4) {
      background: var(--chair-three);
    }
    .cuboid--wing {
      --thickness: calc(var(--base-size) * 1.1);
    }
    .cuboid--wing div {
      background: var(--accent-four);
    }
    .cuboid--wing div:nth-of-type(1) {
      background: var(--accent-one);
    }
    .cuboid--wing div:nth-of-type(3) {
      background: var(--accent-two);
    }
    .cuboid--wing div:nth-of-type(4) {
      background: var(--accent-three);
    }
    .cuboid--rotor {
      --thickness: calc(var(--base-size) * 0.14);
    }
    .cuboid--rotor div {
      background: var(--dash-four);
    }
    .cuboid--rotor div:nth-of-type(1) {
      background: var(--dash-one);
    }
    .cuboid--rotor div:nth-of-type(3) {
      background: var(--dash-two);
    }
    .cuboid--rotor div:nth-of-type(4) {
      background: var(--dash-three);
    }
    .cuboid--launcher {
      --thickness: calc(var(--base-size) * 0.08);
    }
    .cuboid--launcher div {
      background: var(--rocket-four);
    }
    .cuboid--launcher div:nth-of-type(1) {
      background: var(--rocket-one);
    }
    .cuboid--launcher div:nth-of-type(3) {
      background: var(--rocket-two);
    }
    .cuboid--launcher div:nth-of-type(4) {
      background: var(--rocket-three);
    }
    .cuboid--light {
      --thickness: calc(var(--base-size) * 0.035);
      -webkit-animation: flash calc(
              (1 - var(--on, 0)) * (var(--speed, 1) * 1s)
      ) infinite;
      animation: flash calc((1 - var(--on, 0)) * (var(--speed, 1) * 1s)) infinite;
    }
    .cuboid--light div {
      background: hsla(var(--hue, 10), 90%, 50%, var(--alpha, 0));
    }
    .helicopter__ammo {
      height: 50%;
      width: 30%;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translate(0, -50%);
    }
    .cuboid--ammo {
      --thickness: calc(var(--base-size) * 0.05);
    }
    .cuboid--ammo div {
      background: hsl(var(--hue), 80%, 80%);
    }
    button {
      height: 48px;
      width: 48px;
      position: fixed;
      bottom: 1rem;
      right: 1rem;
      cursor: pointer;
      transform: translate3d(0, 0, 150vmin);
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      border: 0;
      background: transparent;
      outline: transparent;
    }
    button > svg {
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
    }
    button path {
      fill: hsl(210, 80%, calc((90 - (var(--on, 0) * 75)) * 1%));
    }
    button svg:nth-of-type(1),
    button span:nth-of-type(1) {
      display: none;
    }
    button span {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border-width: 0;
    }
    [aria-pressed='true'] svg:nth-of-type(1),
    [aria-pressed='true'] span:nth-of-type(1) {
      display: block;
    }
    [aria-pressed='true'] svg:nth-of-type(2),
    [aria-pressed='true'] span:nth-of-type(2) {
      display: none;
    }
    @-webkit-keyframes blades {
      to {
        transform: translate(-50%, -50%) rotateX(90deg) translate3d(0, 0, 1px)
        rotate(-360deg);
      }
    }
    @keyframes blades {
      to {
        transform: translate(-50%, -50%) rotateX(90deg) translate3d(0, 0, 1px)
        rotate(-360deg);
      }
    }
    @-webkit-keyframes flash {
      50% {
        --alpha: 1;
      }
    }
    @keyframes flash {
      50% {
        --alpha: 1;
      }
    }
  </style>
</head>
<body>
<div class="scene">
  <div class="helicopter__tilter">
    <div class="helicopter__wrapper">
      <div class="helicopter">
        <div class="helicopter__rotor">
          <div class="cuboid cuboid--rotor">
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
          </div>
        </div>
        <div class="helicopter__cockpit">
          <div class="cuboid cuboid--cockpit">
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
          </div>
          <div class="helicopter__base-light">
            <div class="cuboid cuboid--base-light cuboid--light">
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
            </div>
          </div>
          <div class="helicopter__chair">
            <div class="helicopter__chair-back">
              <div class="cuboid cuboid--chair">
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
              </div>
            </div>
            <div class="helicopter__chair-bottom">
              <div class="cuboid cuboid--chair">
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
              </div>
            </div>
          </div>
          <div class="helicopter__dashboard">
            <div class="cuboid cuboid--dashboard">
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
            </div>
          </div>
        </div>
        <div class="helicopter__tail">
          <div class="cuboid cuboid--tail">
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
          </div>
        </div>
        <div class="helicopter__fin">
          <div class="cuboid cuboid--fin">
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
          </div>
          <div class="helicopter__triblade"></div>
          <div class="helicopter__tail-light">
            <div class="cuboid cuboid--tail-light cuboid--light">
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
            </div>
          </div>
        </div>
        <div class="helicopter__stabilizer">
          <div class="cuboid cuboid--stabilizer">
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
          </div>
        </div>
        <div class="helicopter__skids">
          <div class="helicopter__skid--left helicopter__skid">
            <div class="cuboid cuboid--skid">
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
            </div>
          </div>
          <div class="helicopter__skid--right helicopter__skid">
            <div class="cuboid cuboid--skid">
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
            </div>
          </div>
        </div>
        <div class="helicopter__wing">
          <div class="cuboid cuboid--wing">
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
            <div class="cuboid__side"></div>
          </div>
          <div class="helicopter__wing-light helicopter__wing-light--left">
            <div class="cuboid cuboid--wing-light cuboid--light">
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
            </div>
          </div>
          <div class="helicopter__wing-light helicopter__wing-light--right">
            <div class="cuboid cuboid--wing-light cuboid--light">
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
            </div>
          </div>
        </div>
        <div class="helicopter__launchers">
          <div class="helicopter__launcher helicopter__launcher--left">
            <div class="cuboid cuboid--launcher">
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
            </div>
          </div>
          <div class="helicopter__launcher helicopter__launcher--right">
            <div class="cuboid cuboid--launcher">
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
              <div class="cuboid__side"></div>
            </div>
          </div>
        </div>
        <div class="helicopter__blades"></div>
      </div>
    </div>
  </div>
</div>
<button title="Toggle theme">
  <span>Turn Lights Off</span><span>Turn Lights On</span>
  <svg viewBox="0 0 512 512" width="100" title="moon">
    <path
            d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"
    ></path>
  </svg>
  <svg viewBox="0 0 512 512" width="100" title="sun">
    <path
            d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z"
    ></path>
  </svg>
</button>

<script type="module">
  import gsap from 'https://cdn.skypack.dev/gsap@3.11.0';
  let FIRING = false;
  const BOUNDS = 50;
  document.addEventListener('pointermove', ({ x, y }) => {
    const newX = gsap.utils.mapRange(
            0,
            window.innerWidth,
            -BOUNDS,
            BOUNDS,
            x
    );
    const newY = gsap.utils.mapRange(
            0,
            window.innerHeight,
            BOUNDS,
            -BOUNDS,
            y
    );
    gsap.set(document.documentElement, {
      '--rotate-x': newY,
      '--rotate-y': newX,
    });
  });
  const LEFT_LAUNCHER = document.querySelector(
          '.helicopter__launcher--left'
  );
  const RIGHT_LAUNCHER = document.querySelector(
          '.helicopter__launcher--right'
  );

  gsap.ticker.add((time, deltaTime, frame) => {
    if (FIRING) {
      const AMMO = document.createElement('div');
      AMMO.innerHTML = `
      <div class="cuboid cuboid--ammo">
        <div class="cuboid__side"></div>
        <div class="cuboid__side"></div>
        <div class="cuboid__side"></div>
        <div class="cuboid__side"></div>
        <div class="cuboid__side"></div>
        <div class="cuboid__side"></div>
      </div>
    `;
      AMMO.className = 'helicopter__ammo';
      AMMO.style.setProperty('--hue', Math.random() * 360);
      if (frame % 2 === 0) LEFT_LAUNCHER.appendChild(AMMO);
      else RIGHT_LAUNCHER.appendChild(AMMO);

      gsap.to(AMMO, {
        xPercent: () => gsap.utils.random(-3000, -2000),
        // duration: 0.2,
        onComplete: () => AMMO.remove(),
      });
    }
  });

  gsap.ticker.fps(24);

  document.addEventListener('pointerdown', () => {
    FIRING = true;
  });
  document.addEventListener('pointerup', () => {
    FIRING = false;
  });

  // Purely for debugging purposes
  // import { GUI } from 'https://cdn.skypack.dev/dat.gui'

  // const CONTROLLER = new GUI()
  // const CONFIG = {
  //   'rotate-x': -360,
  //   'rotate-y': -360,
  // }
  // const UPDATE = () => {
  //   Object.entries(CONFIG).forEach(([key, value]) => {
  //     document.documentElement.style.setProperty(`--${key}`, value)
  //   })
  // }
  // const PLANE_FOLDER = CONTROLLER.addFolder('Plane')
  // PLANE_FOLDER.add(CONFIG, 'rotate-x', -360, 360, 1)
  //   .name('Rotate X (deg)')
  //   .onChange(UPDATE)
  // PLANE_FOLDER.add(CONFIG, 'rotate-y', -360, 360, 1)
  //   .name('Rotate Y (deg)')
  //   .onChange(UPDATE)
  // UPDATE()

  // Dark Mode
  const THEMES = (window.THEMES = {
    LIGHT: 'LIGHT',
    DARK: 'DARK',
    KEY: 'THEME',
  });

  window.LIGHT_QUERY = window.matchMedia('(prefers-color-scheme: light)'); // Mode enums

  window.__setTheme = (theme) => {
    window.__THEME = theme;
    window.localStorage.setItem(THEMES.KEY, theme);
  }; // Need to check the box based on different criteria.
  // Check if mode is Light and preference is dark or no preference.

  const stored = localStorage.getItem(THEMES.KEY);

  if (stored) {
    window.__THEME = stored;
    window.__setTheme(stored);
  } else {
    if (window.LIGHT_QUERY.matches) {
      window.__THEME = THEMES.LIGHT;
    } else {
      window.__THEME = THEMES.DARK;
    }

    window.__setTheme(window.__THEME);
  }

  window.INITIAL_THEME =
          (window.__THEME && window.__THEME === THEMES.LIGHT) ||
          (window.localStorage.getItem(THEMES.KEY) &&
                  window.localStorage.getItem(THEMES.KEY) === THEMES.LIGHT);

  const BUTTON = document.querySelector('button');

  gsap.set(BUTTON, {
    attr: {
      'aria-pressed': window.__THEME === THEMES.DARK ? 'false' : 'true',
    },
  });

  gsap.set('html', {
    '--on': window.__THEME === THEMES.DARK ? 0 : 1,
  });

  BUTTON.addEventListener('click', () => {
    const NEW_THEME =
            window.__THEME === THEMES.DARK ? THEMES.LIGHT : THEMES.DARK;
    window.__setTheme(NEW_THEME);
    gsap.set('button', {
      attr: {
        'aria-pressed': NEW_THEME === THEMES.DARK ? 'false' : 'true',
      },
    });

    gsap.set('html', {
      '--on': window.__THEME === THEMES.DARK ? 0 : 1,
    });
  });
</script>
</body>
</html>
